<template>
	<view class="container">
		<view class="popup_box">
			<view class="popup_line">
				<input type="digit" :value="money" placeholder="0.00" 
					style="font-size: 50rpx;
					min-height: 100rpx; 
					height: 100rpx;
					width: 50%;"
					@input="onInput"
					@confirm="onConfirm"
				 />
				<image slot="icon" @click="clickImg()" class="photo_icon" :src="img" mode=""></image>
				
				<view v-show="img != empty_img">
					<view class="del-btn" @click="delImg()">
						<uni-icons :color="iconclear.color" :size="iconclear.size" :type="iconclear.type" />
					</view>
				</view>
			</view>
			
			<u-line :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
			
			<view class="popup_line">
				<image slot="icon" class="popup_icon" :src="iconList.add_bill_time" mode="" :lazy-load="lazy_load"></image>
				<text class="popup_type">日期</text>
				<view style="font-size: 28rpx;font-weight: 600;" @click="clickDate()">
					{{picker_time}}
					<u-icon name="arrow-right" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
				</view>
			</view>
			<view class="popup_line">
				<image slot="icon" class="popup_icon" :src="iconList.add_bill_type" mode="" :lazy-load="lazy_load"></image>
				<text class="popup_type">分类</text>
				<view style="font-size: 25rpx;font-weight: 600;">
					{{data.bill_type}}
				</view>
			</view>
			
			<view class="popup_line">
				<image slot="icon" class="popup_icon" :src="iconList.add_bill_desc" mode="" :lazy-load="lazy_load"></image>
				<text class="popup_type">备注</text>
				<input type="text" :value="desc" @input="onDescInput" placeholder="添加备注" style="font-size: 28rpx;width: 70%;" />
			</view>
			
			<view style="display: flex; padding: 20rpx;">
				<view style="margin: auto;">
					<u-button 
						type="success" 
						size="medium" 
						:disabled="submitStatus" 
						@click="saveSub"
					>保存</u-button>
				</view>
				<view style="margin: auto;">
					<u-button 
						type="" 
						size="medium" 
						@click="deletSubmit"
					>删除</u-button>
				</view>
			</view>
		</view>
		<u-picker mode="time" v-model="picker_show" :params="picker_params" :default-time="picker_time" @confirm="pickerConfirm"></u-picker>
	</view>
</template>


<script setup>
import { ref } from "vue";
import request from '@/utils/request.js'



const data = ref([])
const picker_params = ref({
	year: false,
	month: true,
	day: true,
	hour: false,
	minute: false,
	second: false
})
const picker_show= ref(false)
const picker_time= ref("")
const month= ref("")
const day= ref("")
	
const money= ref(0)
const desc= ref("")
	
const empty_img= ref('../../static/empty-img.png')
const img= ref('')
	
const submitStatus= ref(true)
	
const lazy_load = ref(true)
const iconclear = ref({
		color : 'red',
		size: '20',
		type: 'clear'
	})
	
const direction = ref('row')
const hairLine = ref(true)
const length = ref('100%')
const color = ref("#d8d8d8")
const borderStyle = ref('solid')
const iconList= ref({
	add_bill_time:'../../static/add_bill_time.png',
	add_bill_type:'../../static/add_bill_type.png',
	add_bill_desc:'../../static/add_bill_desc.png',
	user_bill:'../../static/user_bill.png',
	user_feedback:'../../static/user_feedback.png',
	user_kefu:'../../static/user_kefu.png',
	user_time:'../../static/user_time.png',
	user_type:'../../static/user_type.png'
})

uni.$once('detailData', (res) => {
	console.log("详情页接收事件detailData成功,data=", res);
	data.value = res;
});

uni.$emit('newPageOpen',{
	'data':"1"
})
console.log('详情页新页面打开触发newPageOpen');

function onInput(e) {
	let v = e.detail.value;
	v = v.replace(/^\D*([1-9]\d{0,6}\.?\d{0,2})?.*$/,'$1');
	money.value = v;
	if(v>0){
		submitStatus.value = false;
	}else{
		submitStatus.value = true;
	}
	return v;
}
function clickDate(){
	picker_show.value = true;
}
function pickerConfirm(e) {
	if (picker_params.month.value) month.value = e.month;
	if (picker_params.day.value) day.value = e.day;
	
	picker_time.value = month.value + "-" + day.value;
}
function onDescInput(e){
	desc.value = e.detail.value;
}
function clickImg(){
	if(img.value == empty_img.value){
		uploadImg();
	}else{
		previewImg();
	}
}
function uploadImg(){
	uni.chooseImage({
	    count: 1, // 默认9
	    sizeType: ['compressed', 'original'],
	    sourceType: ['album', 'camera'],
	    success: (chooseImageRes) => {
	        const tempFilePaths = chooseImageRes.tempFilePaths;
			uni.getStorage({
				key: "userInfo",
				success: function (res) {
					debugger
					if (res.errMsg === "getStorage:ok" && res.data.openid) {
						request.get("/wx/oss/getToken", { key: res.data.openid }).then(response => {
						    if (res.data) {
						        let uploadMsg = response.data;
						        uni.uploadFile({
						            url: 'http://upload-z2.qiniup.com',
						            filePath: tempFilePaths[0],
						            name: 'file',
						            formData: {
						                'key': res.data.openid,
						                'token': uploadMsg
						            },
						            success: (uploadFileRes) => {
						                let key = JSON.parse(uploadFileRes.data).key;
										img.value = tempFilePaths[0]
						            },
						            fail: (err) => {
						                console.log('fail', err);
						            }
						        });
						    }
						}).catch(err => {
						    console.log(err);
						})
					}
				},
				fail: function () {
				}
			})
			
	    }
	});
}

function generateUUID() {
	var d = new Date().getTime();
	    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
	        var r = (d + Math.random()*16)%16 | 0;
	        d = Math.floor(d/16);
	        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
	    });
	    return uuid;
}

function delImg(){
	img.value = empty_img.value;
}
function previewImg(){
	uni.previewImage({
		current : 0,
		urls: [img.value],
		longPressActions: {
			itemList: ['发送给朋友', '保存图片', '收藏'],
			success: function(data) {
				
			},
			fail: function(err) {
				
			}
		}
	});
}
function initValue(){
	if(data.value['bill_money'] > 0){
		submitStatus.value = false;
	}else{
		submitStatus.value = true;
	}
	
	if(data.value['img_url'] == ""){
		img.value = empty_img.value;
	}else{
		img.value = data.value['img_url'];
	}
	
	desc.value = data.value['desc'];
	money.value = data.value['bill_money'];
	let t = data.value['time'];
	let t_a = t.split("-");
	month.value = t_a[0] || "";
	day.value = t_a[1] || "";
	picker_time.value = month.value + "-" + day.value;
}
function saveSub(){
	submitStatus.value = true;
	
	setTimeout(() => {
		uni.navigateBack({
			delta: 1
		});
	}, 500)
}
function deletSubmit(){
	uni.showModal({
		title: '提示',
		content: '确定删除?',
		success: function (res) {
			if (res.confirm) {
				toDelete();
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
function toDelete(){
	// 跳转
	setTimeout(() => {
		uni.navigateBack({
			delta: 1
		});
	}, 500)
}


initValue();

</script>


<style lang="scss" scoped>
.popup_box{
	padding: 30rpx;
	
	.del-btn{
		position: absolute;
		top: 5rpx;
		left: 645rpx;
		z-index: 10;
		
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	
	}
}
.popup_line{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 26rpx 32rpx;
	font-size: 28rpx;
	line-height: 54rpx;
	color: #606266;
	background-color: #fff;
	text-align: left;
}
.popup_icon {
	width: 50rpx;
	height: 50rpx;
	margin-right: 30rpx;
}
.popup_type{
	font-size: 28rpx;
	padding-right: 30rpx;
}
.u-cell__right-icon-wrap {
	display: inline-flex;
	align-items: center;
	padding-left: 10rpx;
}
.photo_icon{
	width: 100rpx;
	height: 100rpx;
	margin-left: auto;
}
</style>